<!-- 券专区订单详情 -->
<template>
	<view class="orderDetail">
		<view class="header">
			<view class="orderStatus">
				<image :src="orderData.order_status == 3?'../static/images/yiwanc.png':'../static/images/wef.png'" mode=""></image>
				<text>{{orderData.status_desc}}</text>
			</view>
		</view>

		<view class="site" v-if="orderData.type == 2">
			<view class="son">
				<view class="name">
					<image class="addressIcon" src="../static/images/1fsd.png" mode="aspectFit"></image>
					<text>{{orderData.real_name}}</text>
					<text>{{orderData.phone}}</text>
				</view>
				<text class="sit">{{orderData.address_detail}}</text>
			</view>
		</view>
		<!-- 订单信息  收货 -->
		<view class="messages" v-if="orderData.order_status !== 0&&orderData.type == 2">
			<!-- 第一排 -->
			<view class="express">
				<image src="../static/images/awd.png" mode=""></image>
				<view class="son" v-if="orderData.order_status == 1">
					<text class="clamp">订单已提交，请等待公司发货</text>
					<text>{{orderData.add_time}}</text>
				</view>
				<view class="son" v-if="orderData.order_status == 2||orderData.order_status == 3" @tap="express">
					<text class="clamp">{{expressfirtinfo}}</text>
					<text>{{expressfirttime}}</text>
				</view>
				<text class="yticon icon-you"></text>
			</view>
		</view>
		<!-- 标题 -->
		<view class="storeTitle">
			<!-- <image :src="orderData.online_logo" mode=""></image> -->
			<text class="title">{{orderData.integral_shop_name}}</text>
		</view>
		<!-- 商品列表 -->
		<view class="titleitem">
			<view class="item" v-for="(item, index) in orderData.products" :key="index">
				<!-- 图片 -->
				<view class="img">
					<image :src="item.image" mode=""></image>
				</view>
				<!-- 信息 -->
				<view class="msg">
					<text class="clamp2">{{item.store_name}}</text>
					<view class="a">
						<text>{{item.sku?item.sku:''}}</text>
						<text>× {{item.cart_num}}</text>
					</view>
					<view class="b">
						<view class="goodsPrice">{{item.price}}</view>
						<!-- <view class="addCart" @tap="addCart(item)">
							<image src="../static/images/smallPlus.png" mode=""></image>
							<text>加入提货栏</text>
						</view> -->
					</view>
				</view>
			</view>
		</view>
		<view class="info">
			<view class="cellBox">
				<view class="cell">
					<text class="a">订单编号:</text>
					<text class="b">{{orderData.order_id}}</text>
				</view>
				<view class="cell">
					<text class="a">商品总计:</text>
					<text class="b">{{orderData.integral_price}}</text>
				</view>
				<view class="cell">
					<text class="a">运费:</text>
					<text class="b">{{orderData.freight_price}}</text>
				</view>
				<view class="cell">
					<text class="a">提货时间:</text>
					<text class="b">{{orderData.add_time}}</text>
				</view>
				<!-- <view class="cell" v-if="[1,2].includes(orderData.status)">
					<text class="a">快递商家:</text>
					<text class="b">{{orderData.delivery_name}}</text>
				</view>
				<view class="cell" v-if="[1,2].includes(orderData.status)">
					<text class="a">快递单号:</text>
					<text class="b">{{orderData.delivery_id}}</text>
				</view> -->
			</view>
		</view>
		<view class="cut"></view>
		<view class="footer">
			<view class="btn" @tap="back">兑换记录</view>
			<!-- <view class="btn active" @tap="goMall">VIP专区</view> -->
		</view>
	</view>
</template>

<script>
	import {
		signExpress
	} from "@/api/mall.js"
	export default {
		data() {
			return {
				id: '',
				orderData: {},
				expressfirtinfo: '',//最新物流信息
				expressfirttime: '',//最新物流时间
			};
		},
		onLoad(option) {
			this.orderData = JSON.parse(decodeURIComponent(option.item))
			if ([2,3].includes(this.orderData.order_status)&&this.orderData.type == 2) {
				signExpress(this.orderData.order_id).then(res => {
					if(res.data.express.data.length > 0) {
						this.expressfirtinfo = res.data.express.data[0].context
						this.expressfirttime = res.data.express.data[0].time
					} else {
						this.expressfirtinfo = "暂无物流信息"
						this.expressfirttime = "请耐心等待"
					}
				})
			}
		},
		methods: {
			// 查看物流
			express() {
				uni.navigateTo({
					url: "/mall/order/express?id=" + this.orderData.order_id + "&type=jifen"
				})
			},
			// 返回消费记录
			back() {
				uni.navigateBack({
					
				})
			}
		}
	};
</script>

<style lang="scss" scoped>

	.header {
		.orderStatus {
			height: 150rpx;
			background: linear-gradient(135deg, #FFB156, #FDC965);
			width: 750rpx;
			padding: 0 30upx;
			box-sizing: border-box;
			display: flex;
			align-items: center;

			image {
				margin-top: -20rpx;
				width: 34rpx;
				height: 34rpx;
				position: relative;
				z-index: 2;
			}

			text {
				margin-top: -20rpx;
				margin-left: 10rpx;
				font-size: 34rpx;
				line-height: 34rpx;
				font-weight: 500;
				color: rgba(255, 255, 255, 1);
				position: relative;
				z-index: 2;
			}
		}

		// 订单号
		.ordnum {
			width: 686upx;

			// height: 108upx;
			view {
				width: 686upx;
				display: flex;
				justify-content: space-between;

				.one {
					font-size: 24upx;
					font-weight: 400;
					color: rgba(51, 51, 51, 1);
					margin-bottom: 23upx;
				}

				.two {
					color: rgba(153, 153, 153, 1);
					font-size: 24upx;
					font-weight: 400;
				}
			}
		}
	}

	.site {
		position: relative;
		z-index: 2;
		background-color: #fff;
		border-bottom: 20rpx solid #fafafa;
		height: 170upx;
		border-radius: 20rpx 20rpx 0 0;
		margin-top: -20rpx;
		padding: 0 24rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;

		.name {
			font-size: 32upx;
			display: flex;
			font-weight: bold;
			margin-bottom: 10rpx;
			display: flex;
			align-items: center;

			.addressIcon {
				width: 33rpx;
				height: 44rpx;
				margin-right: 20rpx;
			}

			text:nth-of-type(1) {
				margin-right: 20rpx;
			}
		}

		.sit {
			font-size: 28rpx;
			color: #999;
		}
	}

	// 订单信息 收货
	.messages {
		padding: 0 24rpx;
		border-bottom: 20rpx solid #fafafa;

		.express {
			position: relative;
			height: 168rpx;
			display: flex;
			align-items: center;

			image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 40rpx;
			}

			.son {
				margin-left: 20rpx;
				width: 550upx;
				height: 80upx;
				position: relative;

				text:nth-of-type(1) {
					font-size: 28upx;
					color: rgba(51, 51, 51, 1);
				}

				text:nth-of-type(2) {
					font-size: 22upx;
					color: rgba(153, 153, 153, 1);
				}

				image {
					position: absolute;
					top: 18upx;
					right: 32upx;
					height: 22upx;
					width: 22upx;
				}
			}

			.icon-you {
				position: absolute;
				color: #666;
				right: 0;
				top: 50%;
				margin-top: -10rpx;
			}
		}

		// 收货地址
	}

	// 标题
	.storeTitle {
		padding: 0 24rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		line-height: 80rpx;
		color: #333;
		border-bottom: 1rpx solid #f4f4f4;

		image {
			width: 50rpx;
			height: 50rpx;
			border-radius: 50%;
		}

		.title {
			margin-left: 15rpx;
			font-size: 28rpx;
			font-weight: bold;
		}

		.icon-you {
			margin-top: 4rpx;
			margin-left: 15rpx;
			font-size: 28rpx;
		}
	}

	.titleitem {
		border-bottom: 20rpx solid #fafafa;
		padding: 0 24rpx 40rpx;

		.item {
			display: flex;
			padding: 30rpx 0;
			border-bottom: 1rpx solid #f4f4f4;

			.img {
				width: 164rpx;
				height: 164rpx;
				margin-right: 50rpx;
				background: rgba(220, 220, 220, 1);

				image {
					width: 164rpx;
					height: 164rpx;
				}
			}

			.msg {
				width: 488rpx;

				.clamp2 {
					height: 90rpx;
					line-height: 45rpx;
					font-size: 32rpx;
					font-weight: 500;
					color: rgba(51, 51, 51, 1);
				}

				.a {
					margin-top: 30rpx;
					display: flex;
					font-size: 28rpx;
					color: #999;
					justify-content: space-between;
				}

				.b {
					display: flex;
					justify-content: space-between;
					margin-top: 30rpx;

					.goodsPrice {
						font-size: 40rpx;
						font-weight: 500;
						color: #F7453E;

						&:after {
							content: ' 券';
							font-size: 24rpx;
							font-weight: 500;
						}
					}

					.addCart {
						display: flex;
						align-items: center;

						image {
							width: 34rpx;
							height: 34rpx;
							margin-right: 10rpx;
						}

						text {
							font-size: 24rpx;
							color: #FBC866;
						}
					}

				}

				.btn {
					float: right;
					font-size: 22rpx;
					height: 56rpx;
					line-height: 56rpx;
					padding: 0 30rpx;
					margin-top: 20rpx;
					border: 1rpx solid #999;
					color: #333;
					border-radius: 30rpx;
				}
			}
		}
	}

	.info {
		padding: 20rpx 0;
		border-bottom: 40rpx #fafafa solid;

		.cellBox {
			padding: 10rpx 24rpx;
			font-size: 28rpx;

			.cell {
				line-height: 60rpx;
				display: flex;
				align-items: center;

				.a {
					font-size: 28rpx;
					width: 160rpx;
					color: #666;
				}

				.b {
					font-size: 24rpx;
					color: #666;
				}
			}
		}
	}

	.cut {
		height: 140rpx;
		height: calc(env(safe-area-inset-bottom) + 140rpx);
	}


	.footer {
		position: fixed;
		width: 750rpx;
		bottom: 0;
		padding: 30rpx 30rpx 30rpx;
		padding: 30rpx 30rpx calc(30rpx + env(safe-area-inset-bottom));
		box-sizing: border-box;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		z-index: 1;
		box-shadow: 0px -5px 4px 0px rgba(51, 51, 51, 0.02);
		background-color: #fff;

		.btn {
			width: 250rpx;
			height: 80rpx;
			border: 2rpx solid #FBC866;
			border-radius: 40rpx;
			text-align: center;
			line-height: 80rpx;
			font-size: 32rpx;
			color: #FBC866;

			&.active {
				margin-left: 24rpx;
				color: #fff;
				background-color: #FBC866;
			}
		}

	}
</style>
